<template>
  <div
    relative
    h-full
    transition="width 300 ease-in-out"
    :style="{
      width: appStore.mixSiderFixed
        ? themeStore.sider.mixChildMenuWidth + 'px'
        : '0px',
    }"
  >
    <dark-mode-container
      class="drawer-shadow"
      absolute-lt
      flex-col-stretch
      h-full
      nowrap-hidden
      :inverted="themeStore.sider.inverted"
      :style="{
        width: showDrawer ? themeStore.sider.mixChildMenuWidth + 'px' : '0px',
      }"
    >
      <header f-b-c :style="{ height: themeStore.header.height + 'px' }">
        <h2 text="16 primary bold" pl-8>
          {{ appTitle }}
        </h2>
        <div
          text="16 gray-600"
          px-8
          cursor-pointer
          @click="appStore.toggleMixSiderFixed"
        >
          <icon-mdi-pin-off v-if="appStore.mixSiderFixed" />
          <icon-mdi-pin v-else />
        </div>
      </header>
      <n-scrollbar flex-1-hidden>
        <n-menu
          v-model:expanded-keys="expandedKeys"
          :value="(route.name as string)"
          :options="menus"
          :indent="18"
          :inverted="!themeStore.darkMode && themeStore.sider.inverted"
          @update:value="handleMenuSelect"
        />
      </n-scrollbar>
    </dark-mode-container>
  </div>
</template>

<script setup lang="ts">
import { useAppStore, useThemeStore } from "@/store";
import { useMenu } from "../../hooks";

interface Props {
  /** 菜单抽屉可见性 */
  visible: boolean;
  /** 子菜单数据 */
  menus: App.GlobalMenuOption[];
}
const props = defineProps<Props>();

const appTitle = import.meta.env.VITE_APP_TITLE;

const appStore = useAppStore();
const themeStore = useThemeStore();

const showDrawer = computed(
  () => (props.visible && props.menus.length) || appStore.mixSiderFixed
);

const { route, expandedKeys, handleMenuSelect } = useMenu(props.menus);
</script>

<style scoped>
.drawer-shadow {
  box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
}
</style>
